<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <link rel="stylesheet" href="public/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="public/assets/css/login.css" media="all">
    <script type="text/javascript">document.write('<script src="public/module/version.js?v=' + new Date().getTime() + '"><\/script>');</script>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg"/>
    </div>

    <div class="login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
            </div>
            <form class="layui-card-body layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="username" type="text" lay-verify="required" placeholder="账号"
                               class="layui-input layui-input-sm">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="required" placeholder="密码"
                               class="layui-input layui-input-sm">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="code" style="width:170px" type="text" lay-verify="required"
                                       placeholder="验证码" class="layui-input layui-input-sm">
                                <input name="deviceId" type="hidden"/>
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="#" style="display:none">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                </div>
            </form>
        </div>
    </div>


    <div class="login-footer">
        <p>© 2018 <a href="javascript:;" target="_blank">JeeCp版权所有</a></p>

    </div>

</div>

<script type="text/javascript" src="public/assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="public/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="public/module/Math.uuid.js"></script>
<script>

    //加载css/js 文件
    layui.config({base: 'public/module/', version: true})
        .extend({_user: "api/user", crypto: "utils/crypto"})
        .use(['config', 'form', '_user', 'tools'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var config = layui.config;
            var tools = layui.tools;
            var _user = layui._user;
            let uuid = Math.uuid();
            var $captcha = $('.login-captcha');
            if (!$.isEmptyObject(config.getToken())) {
                location.replace('./');
                return;
            }
            var simpleCode = config.simpleCode;
            if (!tools.isDevLogin() && "account" != simpleCode) {
                tools.toLogin();
                return;
            }
            // 表单提交
            form.on('submit(login-submit)', function (form) {
                var user = tools.encryption({
                    data: form.field,
                    key: 'pigxpigxpigxpigx',
                    param: ['password']
                })
                //加载提示。。。。。。
                layer.load(2);
                //执行登陆逻辑
                _user.loginByUsername(user.username, user.password, user.code, uuid)
                    .done(function (data, status, xhr) {
                        tools.log(JSON.stringify(data));
                        if (data.access_token) {
                            config.putToken({
                                access_token: data.access_token,
                                refresh_token: data.refresh_token,
                                expires_in: data.expires_in
                            });
                            layer.msg('登录成功', {icon: 1, time: 500}, function () {
                                var redirect = tools.getQueryString('redirect');
                                if (redirect) {
                                    redirect = decodeURIComponent(redirect);
                                    if (redirect.indexOf('login.html') != -1) {
                                        location.replace('./');
                                    } else {
                                        tools.goto(redirect);
                                    }
                                } else {
                                    location.replace('./');
                                }
                            });
                        } else {
                            $captcha.trigger('click');
                            layer.closeAll('loading');
                            layer.msg(data.msg, {icon: 5, time: 500});
                        }
                    })
                    .fail(function (data, status, xhr) {
                        $captcha.trigger('click');
                        layer.closeAll('loading');
                        if (xhr.status == 400) {
                            layer.msg('账号或密码错误', {icon: 5, time: 500});
                        } else if (xhr.status == 426) {
                            layer.msg(data.msg, {icon: 5, time: 500});
                        } else if (xhr.status == 500 || xhr.status == 0) {
                            layer.msg('服务器异常,请联系管理员', {icon: 5, time: 500});
                        } else {
                            layer.msg('未知异常,请联系管理员', {icon: 5, time: 900});
                        }
                    });
                return false; //阻止表单跳转
            });

            // 图形验证码
            var src = config.base_server + "/code/?randomStr=" + uuid;
            $captcha.attr("src", src);
            $captcha.attr("original", src);
            $captcha.attr("style", "");

            // 图形验证码
            $captcha.click(function () {
                this.src = $(this).attr('original') + '&timestamp=' + (new Date).getTime();
            });
        });

</script>
</body>
</html>